<template>
    <div>
      <el-dialog
          width="1047px"
          :close-on-click-modal="false"
          :visible.sync="cardDialogVisible"
          class="printDialog"
          @close="closeDialog"
      >
        <div v-if="admissionFlag" class="succee-box" >
          <div id="card"  ref="printHtml">
            <div id="cardWrap" class="cardWrap">
              <div class="cardContain" >
                <h2 style="text-align: center;font-size: 30px; margin-bottom: 10px">张家界航空工业职业技术学院</h2>
                <h3 style="text-align: center;">2023年单独招生考试准考证</h3>
                <table id="ptb" class="pttb" width="620" align="center" border="1px solid black" cellspacing="0" cellpadding="0">
                  <tbody>
                  <tr style="">
                    <td style="width: 65px; height: 38px; border: 1px solid black;" align="center">姓名:</td>
                    <td style="width: 115px;">
                      <span class="Span3">{{userAdmission.nickname}}</span>
                    </td>
                    <td style="width: 65px;" align="center">性别:</td>
                    <td style="width: 80px;text-align: center;">
                      <span class="Span2">{{userAdmission.sex}}</span>
                    </td>
                    <td rowspan="6" style="width: 150px" align="center">
                      <!--                    <img style="width: 80%;height: 200px;" :src="'http://andysama.work:8481/files/'+userAdmission.number" alt="照片">-->
                      <canvas  style="width: 80%;height: 200px;"  id="myCanvasImg" ref="myCanvasImg"></canvas>
                    </td>
                  </tr>
                  <tr>
                    <td style="height: 38px;" align="center">身份证号:</td>
                    <td colspan="3">
                      <span class="Span3">{{userAdmission.idCard}}</span>
                    </td>

                  </tr>
                  <tr>
                    <td style="height: 38px;" align="center">中学名称:</td>
                    <td colspan="3">
                      <span class="Span3">{{userAdmission.middleSchool}}</span>
                    </td>

                  </tr>
                  <tr>
                    <td rowspan="2" style="height: 76px;" align="center">考试时间:</td>
                    <td rowspan="1" colspan="3">
                      <span class="Span3">{{ userAdmission.date }}</span>
                    </td>

                  </tr>
                  <tr>
                    <td rowspan="1" colspan="3">
                      <span class="Span3">{{userAdmission.time}}</span>
                    </td>

                  </tr>
                  <tr>
                    <td style="height: 38px;" align="center">考试科目:</td>
                    <td colspan="3">
                      <span class="lbl_zhuanye2">{{userAdmission.subject}}</span>
                    </td>
                  </tr>
                  <tr>
                    <td style="height: 38px;" align="center">考试地点:</td>
                    <td colspan="3">
                      <span class="lbl_Comnane">{{ userAdmission.address }}</span>
                    </td>
                    <td colspan="1" style="text-align: center;">
                      <span class="lbl_Comnane">{{userAdmission.addressName}}</span>
                    </td>
                  </tr>

                  <tr>
                    <td style="height: 38px;" align="center">考生号:</td>
                    <td>
                      <span>{{userAdmission.number}}</span>
                    </td>
                    <td align="center">考场号:</td>
                    <td colspan="1" style="text-align: center;">
                      <span class="lbl_tel">{{userAdmission.addressId}}</span>
                    </td>
                    <td colspan="1" style="text-align: center;">
                      <span class="lbl_tel" style="width: 100%;" >座位:{{userAdmission.seat}}</span>
                    </td>
                  </tr>

                  <tr>
                    <td style="height: 80px;" align="center">备注:</td>
                    <td rowspan="5" colspan="5">
                      <p>{{ num1 }}</p>
                      <p>{{ num2 }}</p>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <el-row class="dialog__footer dialog-footer-btn but-box">
            <el-col class="b-box">
              <el-button type="warning" @click="printImg">如果打印下载失败请点击这里</el-button>
              <el-button type="primary" @click="printPDF">打印</el-button>
              <el-button @click="closeDialog()">关闭</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="error-box" v-else>
          <h2>准考证打印功能已关闭</h2>
          <el-row class="dialog__footer dialog-footer-btn but-box">
            <el-col class="b-box">
              <el-button type="danger" @click="closeDialog()">关闭</el-button>
            </el-col>
          </el-row>
        </div>
      </el-dialog>

    </div>
</template>

<script>

import {getPdf, saveImage} from "@/utils/exportPdf";
import {admissionGetById} from "@/request/utils/admission";
import html2Canvas from "html2canvas";

export default {
  name: "admission-card",
  props:['cardDialogVisible','userIdCArd'],
  data() {
    return {
      userAdmission: {},
      num1:'',
      num2:'',
      admissionFlag: true
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {

  },
  //方法集合
  methods: {
    examPrint() {
      // admissionGetById(this.userIdCArd).then( res => {
      //   this.userAdmission = res.data;
      //    let remark= this.userAdmission.remark
      //   let splice = remark.split("，");
      //   console.log(splice)
      //   if(splice[0]!==''){
      //     this.num1 = splice[0]
      //   }
      //   if(splice[1]!==''){
      //     this.num2 = splice[1]
      //   }
      // })


      this.userAdmission = JSON.parse(localStorage.getItem("zjjuser"));
      console.log("userAdmission",this.userAdmission.remark)
      if(this.userAdmission.remark!==undefined){
        let remark= this.userAdmission.remark
        let splice = remark.split("\n");
        console.log(splice)
        if(splice[0]!==undefined){
          this.num1 = splice[0]
        }
        if(splice[1]!==undefined){
          this.num2 = +splice[1]
        }
        this.canvasImg('http://andysama.work:8481/files/'+this.userAdmission.number);
      }else {
        // this.admissionFlag = false;
      }
    },
    closeDialog(){
      this.$emit("close");
    },
    printPDF(){
      getPdf('2023年张家界航空工业职业技术学院单招准考证','card')
    },
    printImg(){
      this.saveImage('printHtml','2023年张家界航空工业职业技术学院单招准考证')
    },
    saveImage(divText, imgText) {
      let canvasID = this.$refs[divText];
      let that = this;
      let a = document.createElement('a');
      html2Canvas(canvasID).then(canvas => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = 'none';
        a.style.display = 'none';
        document.body.removeChild(dom);
        let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
        a.setAttribute('href', URL.createObjectURL(blob));
        //这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute('download', imgText + '.png');
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
    },
    dataURLToBlob(dataurl) {
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    canvasImg(imageUrl) {
      // 'http://andysama.work:8481/files/'+this.userAdmission.number
//  获取canvas
      var canvas = document.getElementById("myCanvasImg")
      //  由于弹窗，确保已获取到
      var a = setInterval(() => {
        //  重复获取
        canvas = document.getElementById("myCanvasImg")
        if (!canvas) {
          return false
        } else {
          clearInterval(a)
          //  可以理解为一个画笔，可画路径、矩形、文字、图像
          var context = canvas.getContext('2d')
          var img = new Image()
          img.src = imageUrl
          img.setAttribute("crossOrigin",'Anonymous')
          //  加载图片
          img.onload = function () {
            if (img.complete) {
              //  根据图像重新设定了canvas的长宽
              canvas.setAttribute("width", img.width)
              canvas.setAttribute("height", img.height)
              //  绘制图片
              context.drawImage(img, 0, 0, img.width, img.height)
            }
          }
        }
      }, 1)
    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.examPrint();
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style scoped lang="less">
span{
  font-weight: 800;
  color: black;
}
.cardContain{
  margin: 0 auto;
  h3{
    margin-bottom:30px;
  }
  .pttb{

    margin: 0 auto;
  }
}
.but-box{
  margin-top: 50px;
  display: flex;
  justify-content: center;
  .b-box{
    display: flex;
    justify-content: center;
  }
}
p{
  color: black;
  font-size: 15px;
  font-weight: 800;
}
#card{
  font-size: 16px;
}
.error-box{
  text-align: center;
  h2{
    margin: 100px 0;
    color: red;
    font-size: 35px;
  }
}
</style>